@import "../reindeer/styles.css";

h1 {
	margin: 0 0 10px 0;
	font-weight: normal;
	font-size: 24px;
}
h2 {
	font-weight: normal;
	color: #336699;
	margin: 1px 0 5px;
	font-size: 21px;
}
h3 {
	margin: 3px 0;
	font-weight: normal;
	font-size: 18px;
}
h4 {
	text-transform: uppercase;
	font-weight: normal;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
h5 {
	text-transform: uppercase;
	font-weight: normal;
	margin: 5px 0 0 0;
	font-size: 12px;
}
p {
	margin: 4px 0;	
}
label {
	cursor: pointer;
}
.page p {
	line-height: 140%;
}

/* the whole header, containing logo, headerBox1 and headerBox2 */
.header {
	background: url("./img/header_bg.png");
	background-repeat: repeat-x;
}

/* div box which contains the logo */
.logo {
	
}
.navItem {
	background-color: #454545;
}
.navItem .v-button-caption {
	color: #fff !important;
	text-decoration: none;
}
.navItem .v-button {
	text-align: center;	
}
/* logo image, links to the home page */
.logoImage {
	cursor: pointer;
}
/* the div box of the right side of the logo */
.headerBox1 {
	
}
/* the div box in the upper right corner of the header */
.headerBox2 {
	background: url("./img/headerBox2_bg.png");
	background-repeat: repeat-x;
}
.headerBox2 {
	color: #fff;
}
.secondNavItem {
	background: #4B77A3;	
}
.secondNavItem .v-button-caption {
	color: #fff !important;
	text-decoration: none;	
}
.headerBox2 .v-menubar {
	background: none;
}
/* login styling */
.login_username {
	margin-bottom: 5px;
	margin-top: 7px;
}
.login_password {
	margin-bottom: 5px;
	margin-top: 10px;
}
.login_button {
	margin-top: 10px;	
}
.username_field, .password_field {
	width: 270px;
}
/* containing page and rightSidebar */
.rightSidebar .component {
	background: #fff;
}
.componentTemplate .v-window-outerheader {
	cursor: default !important;
}
.component-content {
	padding: 10px;
}
.visibility .v-radiobutton {
	display: block;
	float: left;
	width: 80px;
}
.bigSpan {
	font-size: 15px;
}
.v-caption-rolePicker .v-captiontext {
	font-size: 15px;
}
/******************************** footer */
.footer {
	font-size: 90%;
}

.reminder_table {
	background:	#FBE9B3;
}

/******************************** stage box */
.stageBox {
	
}
.box-warning {
	background-color: #FAECD7;
}
.box-ok {
	background-color: #EBEBD6;
}

/******************************** Vaadin css modifications */
.v-select-optiongroup-horizontalgroup .v-select-option {
    display: inline-block;
}
.h-optiongroup .v-select-option {
	
}
.v-form-description {
	margin-top: 10px;
	margin-bottom: 10px;
}
.v-form legend  {
	padding: 0px;
}
.v-select-twincol-buttons  {
	margin: 10px;
}
.v-accordion-item-caption {
	height: 25px;
	font-size: 13px;
	font-weight: normal;
	background: url("./img/accordion_inactive.png");
	text-shadow: none;
	padding: 4px 0 0 10px;
}
.v-accordion-item-open .v-accordion-item-caption { /* accordion title bar active */
	background: url("./img/accordion_active.png") !important;
	color: #fff;
}
.v-accordion-item-open .v-accordion-item-caption:hover {
	background: url("./img/accordion_active.png") !important;
} 
.v-accordion-item-caption:hover {
	background: url("./img/accordion_hover.png") !important;
}
.v-table-cell-content {
	vertical-align: middle !important;
}
.v-progressindicator-indicator {
	background: #4998E5 url(./img/progressbar.png) !important;
}
/******************************** questions */
.questionHeader {
	margin-bottom: 1px;
	/*background-color: #EDEDED;*/
}
.subquestion {
	
}
.noSubquestion {
	margin-bottom: 1px;
	/*background-color: #EDEDED;*/
}
.h-optiongroup .v-select-option {
	display: inline !important;
}
.bigNumber {
	font-size: 22px;
}
.normalNumber {
	font-size: 100%;
}
.formColumns {
	background: #EDEDED;	
}

/******************************** fillOut */
.formColumns .v-label {
	text-align: center;
}
.answer1 {
	background-color: #DC3E18;
}
.answer2 {
	background-color: #F1D730;
}
.answer3 {
	background-color: #D1E5E8;
}
.answer4 {
	background-color: #4A45A7;
	color:#FFFFFF
}
.answer5 {
	background-color: #808080;
}
.fillOutOg .v-select-option {
	display: block !important;
    float: left;
    text-align: center;
    width: 24px;
	margin: 0 17px;
	height: 22px;
}
div.fillOutOg input {
	height: 13px;
	width: 13px;
	cursor: pointer;
}
div.fillOutOg span {
	position: relative;	
}
div.fillOutOg span label {
	position: absolute;
	top: -17px;
	left: -16px;
	width: 56px;
	height: 40px;
	background: none !important;
}
div.fillOutOg > span:nth-child(1) {
	background-color: #DC3E18;
	border-radius: 15px;
}
div.fillOutOg > span:nth-child(2) {
	background-color: #F1D730;
	border-radius: 15px;
}
div.fillOutOg > span:nth-child(3) {
	background-color: #D1E5E8;
	border-radius: 15px;
}
div.fillOutOg > span:nth-child(4) {
	background-color: #4A45A7;
	border-radius: 15px;
}
div.fillOutOg > span:nth-child(5) {
	background-color: #808080;
	border-radius: 15px;
}
div.confidenceCheckboxes span.v-radiobutton {
	margin-right: 25px;
}
/******************************* best practice */
.bp_header {
	background: #EDEDED;
}
/******************************* evaluation */
.rolePicker {
	background: #336699;
	color: #fff !important;
}
.color_0 {
	background: transparent;
}
.color_1 {
	background: red;
}
.color_2 {
	background: yellow;
}
.domainItem {
	border-top: 3px solid #ccc;
}
.v-caption-rolePicker {
	margin-bottom: 7px; 
}
.legendBox {
	margin-top: 4px;
	border-radius: 15px;
}

/***************************** general */
.v-view .error {
	background-color: #F2CDCD;
	color: #CC0000;
	padding: 3px;
}

/***************************** new survey */
.weightPicker .v-select-option {
	display: block !important;
	float: left;
	text-align: center;
	width: 90px;
}
.role1 div {
	color: #E59F36;
}
.role2 div, .role3 div, .role4 div, .role5 div, .role6 div, .role7 div, .role8 div, .role9 div, .role10 div, .role13 div, .role14 div {
	color: #999933;	
}
.date0 div {
	color: #CC0000;
}
.date1 div {
	color: #CC0000;
	font-weight: bold;
}